<template>
  <div class="content-box">
    <h2 class="demo-title">安装</h2>
    <div class="demo-tip">
      <p>该项目使用Vue.js开发</p>
      <p>
        <a href="https://cn.vuejs.org/" target="_blank">
          https://cn.vuejs.org/
        </a>
      </p>
    </div>

    <!-- NPM安装 -->
    <h3 class="demo-table-title">npm安装</h3>
    <p class="demo-introduction">
      推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
    </p>
    <div class="demo-code-block">npm i gl-view-ui -S</div>

    <!-- 快速上手 -->
    <h3 class="demo-table-title">快速上手</h3>
    <p class="demo-introduction">你可以引入整个 gl-view-ui，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 gl-view-ui。</p>
    <div class="demo-code-block whiteCode">
      <pre v-highlightjs>
        <code class="">{{fCode(allDemoHtml)}}</code>
      </pre>
    </div>

    <!-- 按需引入 -->
    <h3 class="demo-table-title">按需引入</h3>
    <p class="demo-introduction">
      借助
      babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
    </p>
    <p class="demo-introduction">首先，安装 babel-plugin-component：</p>
    <div class="demo-code-block">
      <p>npm install babel-plugin-component -D</p>
    </div>
    <p class="demo-introduction">然后，将 .babelrc 修改为：</p>
    <div class="demo-code-block whiteCode">
      <pre v-highlightjs>
        <code class="">{{fCode(axDemoHtml)}}</code>
      </pre>
    </div>
    <p class="demo-introduction">
      接下来，如果你只希望引入部分组件，比如 Button，那么需要在
      main.js 中写入以下内容：
    </p>
    <div class="demo-code-block whiteCode">
      <pre v-highlightjs>
        <code class="">{{fCode(importHtml)}}</code>
      </pre>
    </div>

    <!-- 开始使用 -->
    <h3 class="demo-table-title">开始使用</h3>
    <p class="demo-introduction">至此，一个基于 Vue 和 gl-view-ui 的开发环境已经搭建完毕，现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allDemoHtml: `
        import Vue from 'vue';
        import ViewUI from 'gl-view-ui'
        import 'gl-view-ui/lib/theme/index.css'

        Vue.use(ViewUI)

        new Vue({
          render: h => h(App),
        }).$mount('#app')
      `,
      axDemoHtml: `
        {
          presets: [
            '@vue/cli-plugin-babel/preset'
          ],
          plugins: [
            [
              "component",
              {
                "libraryName": "gl-view-ui",  // 组件库名称
                "styleLibrary": {
                  name: 'theme', // 样式文件夹名称
                  base: true // 是否引入theme/base.css文件
                }
              }
            ]
          ]
        }
      `,
      importHtml: `
        import Vue from 'vue';
        import { Button } from 'gl-view-ui'
        Vue.use(Button)

        new Vue({
          render: h => h(App),
        }).$mount('#app')
      `
    }
  },
  methods: {},
}
</script>
<style lang="scss">
.github-img {
  cursor: pointer;
  position: relative;
  top: 5px;
  margin: 0 8px 0 5px;
}
</style>
